<template>
<div id="main">
  <div class='header'>
    大创园巡检
  </div>
  <el-row class="searchBox" :gutter="4">
    <el-form :model="form" ref="form" size="mini">    
      <el-form-item>
        <!-- <el-col :span="12">
          <el-select v-model="form.planId" placeholder="请选择计划名称"  style="width: 100%;">
            <el-option v-for="item in planList" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-col> -->
        <el-col :span="12">
          <el-date-picker type="date" placeholder="选择计划开始时间" 
          v-model="form.beginTime" 
          value-format="yyyy-MM-dd"
          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-date-picker type="date" placeholder="选择计划结束时间" 
          v-model="form.endTime" 
          value-format="yyyy-MM-dd"
          style="width: 100%;"></el-date-picker>
        </el-col>                
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-select v-model="form.status" placeholder="请选择计划状态">
            <el-option label="进行中" :value="0"></el-option>
            <el-option label="已完结" :value="1"></el-option>
          </el-select>
        </el-col>    
         <el-col :span="12">
          <el-button @click="resetForm">重置</el-button>
          <el-button  type="primary" @click="getList">查询</el-button>   
        </el-col>   
      </el-form-item>
      <!-- <el-form-item class="footer">         
          <el-button @click="resetForm">重置</el-button>
          <el-button  type="primary" @click="getList">查询</el-button>   
        </el-form-item> -->
    </el-form>
  </el-row>
  <el-table :data="tableData" style="width: 100%" v-loading="loading">
    <el-table-column prop="planName" label="计划名称" width="100px"></el-table-column>
    <el-table-column prop="status" label="状态" width="100px">
      <template slot-scope="scope">
        {{scope.row.status == 0 ? '进行中' : '已完结'}}
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="100px"></el-table-column>
    
    <el-table-column fixed="right" label="操作" align="center" width="100">
      <template slot-scope="scope">
        <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="footer">
    <el-pagination small background layout="prev, pager, next" :total="total"
    @current-change="currentChange"
    ></el-pagination>
  </div>
</div>
</template>

<script>
import {
  Host_Ip2
} from "../../config.js"
import { getPlanList  } from '../../api/requestForm.js'

export default {
  components: {
  },
  data () {
    return {
      actionUrl: Host_Ip2 + '/dfs/upload',
      form: {
        pageSize: 10,
        pageNum: 1,
        beginTime: null,
        endTime: null
      },
      planName: '',
      loading: false,
      total: 0,
      tableData: []
    }
  },
  methods: {    
    // 查看
    detail(row) {
      // console.log(row, 'detail');
      // 页面跳转  
      this.$router.push({ 
        path: '/Index',
        query: {
          id: row.id
        }})
    },
    getList() {
      this.loading = true
      console.log(this.form)
      getPlanList(this.form).then(res => {
        if (res.data.code === 0) {
          this.loading = false
          this.tableData = res.data.rows
          this.total = res.data.total
          console.log(this.tableData)         
        }        
      })
    },
    resetForm() {
      this.form = {
        pageSize: 10,
        pageNum: 1,
        beginTime: null,
        endTime: null
      }
    },
    currentChange(e) {
      console.log(e)
      this.form.pageNum = e
      this.getList()
    },
 
  },
  created() {
    this.getList()
  },
  mounted() {   
  },
  watch: {
    activeTab(newVal, oldVal) {
      // console.log(newVal, oldVal)
      this.form2 = {}
    }
  }
}
</script>

<style >
html,body{
  padding: 0 !important;
  margin: 0 !important;
}

</style>
<style scoped lang="less">
.searchBox {
  background-color: rgb(84, 199, 228);
  .el-form-item {
    margin: 4px !important;
  }
}
.footer {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}
.header {
  padding: 12px;
  background-color: rgb(21, 101, 221);
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
}
</style>
